最上面黑色底有手機時間、通知等等的狀態列稱為 Status bar，而 Toolbar 就是在他底下灰色底的那一條，也有人稱為 Action bar

通常上面會有一些該手機程式名稱或頁面名稱加上很多的按鈕，當使用者因為閱讀內容上下滑時，Toolbar 則還會在頂端供使用者使用。可叫出隱藏選單的按鈕、其他圖示、搜尋方塊等等

在這節就會寫出如何製作出有 button 的 toolbar

刪除預設

在剛開好一個 project 的時候，他的 style 預設是會有 toolbar 的，如果想要每一頁自己製作的話，就得要先把原本的刪掉。

res/values/styles.xml

可以在你要的父類的 theme 改成 NoActionBar，就會不見了
parent="Theme.AppCompat.Light.NoActionBar"

如下

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

在這裡，也可以加上一個 item 讓前面講的 status bar 隱藏，變成全螢幕模式。

<item name="android:windowFullscreen">true</item>

以後就可以來寫自己的 toolbar 了

XML

我用的是 androidx 包下的 toolbar。

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbarMain"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_constraintTop_toTopOf="parent"
    app:elevation="5dp"
    android:background="@color/colorPrimary"
    app:logo="@drawable/ic_baseline_android_24_white"
    app:titleMarginStart="30dp"
    app:title="@string/title"
    app:titleTextColor="#FFF"
    app:subtitle="Subtitle"
    app:subtitleTextColor="#FFF"
    app:navigationIcon="@drawable/ic_baseline_menu_24_white"
    />

icon 的圖片是在 drawable 資料夾底下 new vactor asset 來的

在我的手機上運行起來是這樣子，有了左邊的 navigation button 可以讓我們做出左滑滑出更多選單的效果，

關於它的使用會在之後分享。

再來就是右邊的那些小按鈕。要另外建立 menu 給他做使用。
一樣在 res 資料夾下，新增一個名為 menu 的 package，New 一個 Menu Resource File

寫出以下的 menu 給 toolbar 用，一定要有 title 跟 id。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_share"
        android:title="Share"
        app:showAsAction="ifRoom"
        android:icon="@drawable/ic_baseline_share_24_white"/>

    <item
        android:id="@+id/menu_language"
        android:title="Language"
        app:showAsAction="ifRoom"
        android:icon="@drawable/ic_baseline_language_24_white"/>

    <item
        android:id="@+id/menu_setting"
        android:title="Setting"
        app:showAsAction="ifRoom"
        android:icon="@drawable/ic_baseline_settings_24_white"/>
</menu>

showAsAction 屬性我都使用 ifRoom，如果有空間才顯示，沒有的話就會有個點點點的按鈕把他們裝起來。

使用

val toolbar: Toolbar= findViewById(R.id.toolbarMain)
toolbar.inflateMenu(R.menu.tool_bar)

和一般的元件一樣 findViewBytId，特別的是，要把我們最一開始做好的 menu 放進去

再用 when 來做點擊監聽器。

toolbar.setOnMenuItemClickListener {
    when(it.itemId){
        R.id.menu_more -> {
        }
        R.id.menu_language -> {
        }
        R.id.menu_setting -> {
        }
    }
    false
}

完成以後就會像這樣

加上 Style

以我的例子來說，因為 toolbar 很多地方都會要用到，所以可以用個 style 裝起來。

例如

<style name="ToolBarStyle">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">?attr/actionBarSize</item>
    <item name="android:minHeight">?attr/actionBarSize</item>
    <item name="android:elevation">2dp</item>
    <item name="android:background">@color/AhorroActionBar_Gray</item>
    <item name="android:titleTextColor">@color/AhorroWhite</item>
    <item name="android:textColor">@color/AhorroWhite</item>\
</style>

以後再用的時候就可以套用該 style 就好了，減少許多要設定的屬性。

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar_main"
    android:layout_width="match_parent"
    app:layout_constraintTop_toTopOf="parent"
    app:logo="@drawable/ic_round_monetization_on_24_white"
    app:navigationIcon="@drawable/ic_baseline_menu_24_white"
    app:titleTextColor="@color/AhorroWhite"
    style="@style/ToolBarStyle"/>

關於 style 後面會再多用一篇講解。